{# src/Ipartek/BlogBundle/Resources/views/Ajax/index.html.twig #}
{% extends "IpartekBlogBundle::layout.html.twig" %}


 

{% block noticias %}

	<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

	<script type="text/javascript">
	<!--
		$(document).ready(function() {
			//ocultar gif loading
			$("#loading").css('visibility','hidden');
			//capturamos evento 'change' al seleccionar en el combo Categorias
			$("#comboCategorias").change(function () {
				//opcion seleccionada
				var seleccionado = $("#comboCategorias option:selected");
				//alert(seleccionado.val() + " - " + seleccionado.text());

				//desabilitado select noticias mientras se carga	
				$("#comboNoticias").prop('disabled', 'disabled');
				//mostrar gif cargando
				$("#loading").css('visibility','visible');

				//lamada Ajax				
				  $.ajax({url: "{{ url('ejemplo_ajax_llamada') }}", 
                      type: 'POST', 
                      dataType: 'json', 
                      data: {id: seleccionado.val()},
                      //retorno correcto de la accion del controlador
                      success: function (data) {
                    	   //cargar resultado en el Select	
                    	   $("#comboNoticias").html(data);
                    	   //volver a habilitar select
                    	   $("#comboNoticias").removeAttr("disabled")
                    	   //ocultar gif
                    	   $("#loading").css('visibility','hidden');              
                        },
                      //gestion de errores  
                      error: function (xhr, ajaxOptions, thrownError) {
                    	  	$("#loading").css('visibility','hidden');  
                            alert(xhr.status + " - " + thrownError);
                          },  
                  });

				
			});	
			
		});
	//-->
	</script>
	
    <h1>Ejemplo Ajax</h1>

    <select id="comboCategorias">
    	<option value="-1" selected="selected">Selecciona Categoria</option>
    {% for categoria in categorias %}
    	<option value={{ categoria.id }}>{{ categoria.nombre }}</option>
    {%  endfor  %}    
    </select>	
    
    
    <select id="comboNoticias" >
    	<option value="-1">Sin seleccionar</option>
    </select>
    
    <img id="loading" src="{{ asset('bundles/ipartekblog/images/loading.gif')}}" alt="cargando noticias" title="cargando noticias"/>
    
    
{% endblock %}
